<!-- templates/table_list.html -->
{% extends 'base.html' %}

{% block title %}{{ data_source.name }} - 数据表列表{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-start">
        <div class="col-12 col-md-8 col-lg-10"> <!-- 右侧70%宽度 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">{{ data_source.name }} - 数据表管理</h1>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTableTableModal">
                <i class="fa fa-plus"></i> 新建表
            </button>
        </div>
        
        <div class="mb-4">
            <a href="{% url 'datasource_list' %}" class="btn btn-sm btn-outline-secondary">
                <i class="fa fa-arrow-left"></i> 返回数据源列表
            </a>
        </div>
        <!-- 搜索框 -->
        <div class="mb-3 d-flex">
            <input type="text" id="datasourceSearchInput" class="form-control me-2" placeholder="搜索数据表名称/描述...">
            <button id="datasourceSearchBtn" class="btn btn-outline-secondary" type="button">
                <i class="fa fa-search"></i> 
            </button>
        </div>
        
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
        
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for table in tables %}
                            <tr>
                                <td>{{ table.name }}</td>
                                <td>{{ table.description|truncatechars:50 }}</td>
                                <td>{{ table.created_at|date:"Y-m-d H:i" }}</td>
                                <td>{{ table.updated_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'field_list' datasource_pk=data_source.pk table_pk=table.pk %}" class="btn btn-sm btn-outline-secondary">
                                        <i class="fa fa-list"></i> 查看字段
                                    </a>
                                    <!-- <a href="{% url 'table_update' datasource_pk=data_source.pk pk=table.pk %}" class="btn btn-sm btn-outline-primary">
                                        <i class="fa fa-edit"></i> 编辑
                                    </a> -->
                                    <button type="button"
                                        class="btn btn-sm btn-outline-primary edit-table-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editTableModal"
                                        data-id="{{ table.pk }}"
                                        data-name="{{ table.name }}"
                                        data-description="{{ table.description }}">
                                        <i class="fa fa-edit"></i> 编辑
                                    </button>
                                    <a href="{% url 'table_delete' datasource_pk=data_source.pk pk=table.pk %}" class="btn btn-sm btn-outline-danger">
                                        <i class="fa fa-trash"></i> 删除
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">
                                    <i class="fa fa-folder-open-o fa-3x mb-2"></i>
                                    <p>暂无字段，请创建一个新的字段。</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

<!-- 创建数据源模态框 -->
<div class="modal fade" id="createTableTableModal" tabindex="-1" aria-labelledby="createTableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" id="createTableForm">
                <!-- CSRF令牌应放在表单开始位置 -->
                {% csrf_token %}
                <input type="hidden" name="data_source" value="{{ data_source.pk }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="createTableModalLabel">创建表格</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 表单错误提示 -->
                    {% if form.errors %}
                        <div class="alert alert-danger mb-4" role="alert">
                            <h4 class="alert-heading">请修正以下错误</h4>
                            <ul class="mb-0">
                                {% for field in form %}
                                    {% for error in field.errors %}
                                        <li>{{ field.label }}: {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    
                    <!-- 数据源名称 -->
                    <div class="mb-4">
                        <label for="{{ form.name.id_for_label }}" class="form-label">
                            {{ form.name.label }}
                            {% if form.name.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-database"></i></span>
                            <input type="text" 
                                   class="form-control {% if form.name.errors %}is-invalid{% endif %}" 
                                   id="{{ form.name.id_for_label }}" 
                                   name="name" 
                                   value="{{ form.name.value|default:'' }}"
                                   placeholder="请输入表名称"
                                   required>
                        </div>
                        {% if form.name.help_text %}
                            <div class="form-text">{{ form.name.help_text }}</div>
                        {% endif %}
                        {% if form.name.errors %}
                            <div class="invalid-feedback">{{ form.name.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <!-- 数据源描述 -->
                    <div class="mb-4">
                        <label for="{{ form.description.id_for_label }}" class="form-label">
                            {{ form.description.label }}
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-file-text-o"></i></span>
                            <textarea class="form-control {% if form.description.errors %}is-invalid{% endif %}" 
                                      id="{{ form.description.id_for_label }}" 
                                      name="description" 
                                      rows="3"
                                      placeholder="请输入表描述（可选）">{{ form.description.value|default:'' }}</textarea>
                        </div>
                        {% if form.description.help_text %}
                            <div class="form-text">{{ form.description.help_text }}</div>
                        {% endif %}
                        {% if form.description.errors %}
                            <div class="invalid-feedback">{{ form.description.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fa fa-times mr-1"></i>取消
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-check mr-1"></i>保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑数据源模态框 -->
<div class="modal fade" id="editTableModal" tabindex="-1" aria-labelledby="editTableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" id="editTableForm">
                <!-- CSRF令牌应放在表单开始位置 -->
                {% csrf_token %}
                <input type="hidden" name="data_source" value="{{ data_source.pk }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="editTableModalLabel">编辑表格</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 表单错误提示 -->
                    {% if form.errors %}
                        <div class="alert alert-danger mb-4" role="alert">
                            <h4 class="alert-heading">请修正以下错误</h4>
                            <ul class="mb-0">
                                {% for field in form %}
                                    {% for error in field.errors %}
                                        <li>{{ field.label }}: {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    
                    <!-- 数据源名称 -->
                    <div class="mb-4">
                        <label for="{{ form.name.id_for_label }}" class="form-label">
                            {{ form.name.label }}
                            {% if form.name.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-database"></i></span>
                            <!-- <input type="text" 
                                   class="form-control {% if form.name.errors %}is-invalid{% endif %}" 
                                   id="{{ form.name.id_for_label }}" 
                                   name="name" 
                                   value="{{ form.name.value|default:'' }}"
                                   placeholder="请输入表名称"
                                   required> -->
                            <input type="text" class="form-control" id="edit_table_name" name="name" required>
                        </div>
                        {% if form.name.help_text %}
                            <div class="form-text">{{ form.name.help_text }}</div>
                        {% endif %}
                        {% if form.name.errors %}
                            <div class="invalid-feedback">{{ form.name.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <!-- 数据源描述 -->
                    <div class="mb-4">
                        <label for="{{ form.description.id_for_label }}" class="form-label">
                            {{ form.description.label }}
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-file-text-o"></i></span>
                            <textarea class="form-control" id="edit_table_description" name="description" rows="3"></textarea>
                            <!-- <textarea class="form-control {% if form.description.errors %}is-invalid{% endif %}" 
                                      id="{{ form.description.id_for_label }}" 
                                      name="description" 
                                      rows="3"
                                      placeholder="请输入表描述（可选）">{{ form.description.value|default:'' }}</textarea> -->
                        </div>
                        {% if form.description.help_text %}
                            <div class="form-text">{{ form.description.help_text }}</div>
                        {% endif %}
                        {% if form.description.errors %}
                            <div class="invalid-feedback">{{ form.description.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fa fa-times mr-1"></i>取消
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-check mr-1"></i>保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        //监听所有编辑按钮
        document.querySelectorAll('.edit-table-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                // e.preventDefault(); // 防止跳转
                // 填充编辑模态框表单
                document.getElementById('edit_table_name').value = btn.getAttribute('data-name') || '';
                document.getElementById('edit_table_description').value = btn.getAttribute('data-description') || '';
                // 可选：设置隐藏字段或action以便提交到正确的URL
                // document.getElementById('editTableForm').action = `/datasource/${btn.getAttribute('data-id')}/edit/`;
            });
            // 修改标题
            //document.getElementById('editDataSourceModalLabel').innerText = '编辑数据源';
            // });
        });
        // 搜索功能
        // function filterTable() {
        //     const keyword = document.getElementById('datasourceSearchInput').value.trim().toLowerCase();
        //     document.querySelectorAll('table tbody tr').forEach(function(row) {
        //         const text = row.innerText.toLowerCase();
        //         row.style.display = text.includes(keyword) ? '' : 'none';
        //     });
        // }
        // const searchInput = document.getElementById('datasourceSearchInput');
        // const searchBtn = document.getElementById('datasourceSearchBtn');
        // if (searchInput && searchBtn) {
        //     searchBtn.addEventListener('click', filterTable);
        //     searchInput.addEventListener('keydown', function(e) {
        //         if (e.key === 'Enter') filterTable();
        //     });
        // }
        });
</script>
{% endblock %}